<#import "/admin/_layout.html" as layout>
<@layout.header "文件上传">
    <link rel="stylesheet" href="/static/libs/jquery-file-upload/css/jquery.fileupload.css">
    <style>
        #uploader {
            height: 230px;
        }
        .myPanel {
            font-size: 25px;
            color: #ccc;
            text-align: center;
            padding-top: 60px;
        }
    </style>
</@layout.header>
<@layout.body>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                        <li class="breadcrumb-item"><a href="#">附件</a></li>
                        <li class="breadcrumb-item active">上传</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <section class="content">

        <div class="row">
            <div class="col-12">
                <div class="box box-primary">
                    <div class="box-body">
                        <div id="uploader">
                            <span class="btn btn-block btn-primary fileinput-button" style="width: 120px">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>选择文件...</span>
                                <input id="cfile" type="file" name="files" multiple>
                            </span>

                            <div class="myPanel">
                                或者拖动文件到这里进行上传...
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
</@layout.body>
<@layout.script>
    <script src="/static/libs/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="/static/libs/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="/static/libs/jquery-file-upload/js/jquery.fileupload.js"></script>
    <script>
        $('#cfile').fileupload({
            dropZone: $('#uploader'),
            url: '/admin/attachment/doUpload',
            sequentialUploads: true,
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $(".myPanel").text("上传进度：" + progress + "%")
            },
            done: function (e, data) {
                $(".myPanel").text("或者拖动文件到这里进行上传...");
                if(data.result.code == 1) {
                    alertSuccess("文件上传成功...", function () {
                        location.href = "/admin/attachment/list"
                    });
                }else {
                    alertError(data.result.message);
                }
            }
        });

    </script>
</@layout.script>